<template>
	<div class="toolBar">
		<div class="searchBox">
			<!-- <v-TbSearchIp @searchVal='getTbSearchIP'>
			</v-TbSearchIp> -->
			<div class="nameBox">
				<div>IP:</div>
				<el-input v-model="searchVal" placeholder="请输入IP"></el-input>
			</div>
			<div class="nameBox">
				<div style="width: 100px;">系统名称:</div>
				<el-input v-model="systemName" placeholder="请输入系统名称"></el-input>
			</div>
			<div class="nameBox">
				<div style="width: 120px;">表空间名称:</div>
				<el-input v-model="tableSpaceName" placeholder="请输入表空间名称"></el-input>
			</div>
			<el-button icon="el-icon-search" type="primary" @click="searchClick" style="margin-left: 15px;">
				搜索
			</el-button>
		</div>
		<div class="refresh">
			<v-Refresh></v-Refresh>
		</div>
		<div style="float: right; margin: 0 10px 0 10px;">
			<vJsonExcel :data="jsonData" :name="'表空间参数'">
				<el-button icon="el-icon-download" circle title="导出"></el-button>
			</vJsonExcel>
		</div>
		<div class="tableTool">
			<v-TbFilterColumn :tableColumns="tableColumns" @tbChangeLie="getTbFilterColumn">
			</v-TbFilterColumn>
		</div>


		<!-- <div class="dateBox">
            <v-TbDatePicker></v-TbDatePicker>
        </div> -->
	</div>
</template>

<script>
	import bus from 'common/bus.js';
	import vTbSearchIp from '../toolbar/TbSearchIp.vue';
	import vTbFilterColumn from '../toolbar/TbFilterColumn.vue';
	import vTbDatePicker from '../toolbar/TbDatePicker.vue'
	import vRefresh from 'common/refresh.vue';
	import vJsonExcel from 'vue-json-excel';
	// import search from 'core-js/library/fn/symbol/search';

	export default {
		name: 'toolBar',
		props: ['tableColumns', 'DCData'],
		components: {
			vTbSearchIp,
			vTbFilterColumn,
			vTbDatePicker,
			vRefresh,
			vJsonExcel
		},
		data() {
			return {
				searchVal: '',
				changeLie: '',
				systemName: '',
				tableSpaceName:'',
				system: '',
				jsonData: [],
				searchList: [],
			};
		},
		created() {

		},
		mounted() {

		},
		computed: {

		},
		methods: {
			getData() {
				let newData = this.DCData.data.map(item => {
					return {
						IP: item.IP,
						MONID: item.MONID,
						系统名称: item.SYSTEMNAME,
						实例名:item.DB_SID,
						表空间:item.TABLESPACE_NAME,
						类型:item.TBS_TYPE,
						当前大小GB:item.TOTAL_GB,
						已使用大小GB:item.USED_GB,
						当前剩余GB:item.FREE_GB,
						拓展空间剩余GB:item.FREE_GBYTES,
						自动扩容使用率:item.USED_PER,
						表空间最大值GB:item.ALLOCA_GB,
						使用率:item.TALALL_PER,
						告警级别:item.ALERT_LEVEL,
						记录时间:item.RECORD_TIME
					};
				});
				
				this.jsonData = newData
				console.log(newData)
			},
			searchClick() {
				this.searchList = []
				this.searchList = {
					ip: this.searchVal || '',
					systemname: this.systemName || '',
					tableSpaceName:this.tableSpaceName || ''
				}

				// this.searchList.push(this.searchVal)
				// this.searchList.push(this.system)
				// this.searchList.push(this.systemName)
				console.log('参数', this.searchList)
				this.$emit('getSearchIP', this.searchList);

			},
			resetClick() {
				this.searchVal = '';
				this.$emit('getSearchIP', this.searchVal);
			},
			getTbSearchIP(val) {
				this.searchVal = val;
			},
			getTbFilterColumn(val) {
				this.changeLie = val;
				this.$emit('changeLie', this.changeLie);
			},
		},
		watch: {
			DCData: function(newVal, oldVal) {
				if (newVal !== oldVal && newVal) {
					this.getData()
				}
			}
		}
	}
</script>

<style scoped>
	.toolBar {
		overflow: hidden;
		margin-bottom: 14px;

	}

	.nameBox {
		margin-left: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.searchBox {
		float: left;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20px;
	}

	.tableTool {
		float: right;
	}

	.dateBox {
		float: left;
	}

	.refresh {
		float: left;
		width: 300px
	}
</style>
